<template lang="pug">
  .vr-ctrl-box(ref='VRBox', v-if='isVrMode && vrFlag && clickVr')
    .exit-btn(@click='exitVrMode')
      span 退出VR
    .set-btn(@click='setupVrMode')
      span 设置
</template>

<script>
import vrMixins from '@/mixins/vr'
export default {
  name: 'vrCtrl',
  mixins: [vrMixins],
  data() {
    return {
      isShowVrCtrl: false
    }
  },
  methods: {
    exitVrMode() {
      this.$krp.hideVR()
      // 防止VR模式
      this.$vgo.emit('hide:screenshot')
    },
    setupVrMode() {
      this.$krp.setupVR()
      // this.exitVrMode()
    },
  }
}
</script>

<style lang="stylus">
$primary = #20A0FF
.vr-ctrl-box
  display: flex
  justify-content: center
  position: fixed
  left: 0
  right: 0
  bottom: 20px
  height: 40px
  width: 100%
  z-index: 5000
  transition: all .4s
  .exit-btn, .set-btn
    flex: 1
    height: 30px
    text-align: center
    span
      width: 80px
      height: 30px
      display: inline-block
      line-height: 30px
      font-size: 14px
      border-radius: 15px
      color: #fff
      background: rgba($primary, .6)
</style>
